
<template>
  <view class="page page-grey has-fixed-footer page-carriage">
    <page-header :showPlaceHolder="false"></page-header>
    <view class="page-carriage-tips">
      <fui-text text="如果一笔订单有多个商品，且绑定了不同的商品运费模版，系统会选取最高的商品运费。" size="24" color="#FF2B2B"></fui-text>
    </view>
    <view class="carriage-list">
      <view class="carriage-item" v-for="item in listData" :key="item.id">
        <view class="carriage-item-header">
          <fui-text :text="item.name" size="28" fontWeight="bold" color="#333"></fui-text>
          <view class="carriage-item-used" v-if="item.applyNum">{{ `已被${item.applyNum}个商品使用` }}</view>
        </view>
        <view class="carriage-item-content">
          <view class="carriage-item-info"><fui-text :text="formatDateTime(item.updateTime)" size="24" color="#666"></fui-text> <fui-text text="更新" size="24" color="#999"></fui-text></view>
          <view class="carriage-item-info"><fui-text text="付费方式:" size="24" color="#999"></fui-text> <fui-text :text="CARRIAGE_PAY_METHODS[item.payMode]" size="24" color="#666"></fui-text></view>
          <view class="carriage-item-info" v-if="item.freightTemplateCharges && item.freightTemplateCharges[0]"><fui-text text="默认运费:" size="24" color="#999"></fui-text> <fui-text :text="formatCarriageText(item.chargeMode, item.freightTemplateCharges[0])" size="24" color="#666"></fui-text></view>
        </view>
        <view class="carriage-item-footer">
          <fui-button :disabled="!item.applyNum" plain width="140rpx" height="48rpx" borderColor="#ddd" radius="24rpx" :margin="[0, '10rpx']" color="#333" size="24" @click="handleToUsed(item)">使用情况</fui-button>
          <fui-button v-if="item.chargeMode != '20'" plain width="100rpx" height="48rpx" borderColor="#ddd" radius="24rpx" :margin="[0, '10rpx']" color="#333" size="24" @click="handleToEdit(item)">编辑</fui-button>
          <fui-button v-if="item.chargeMode != '20'" plain width="100rpx" height="48rpx" borderColor="#ddd" radius="24rpx" :margin="[0, '10rpx']" color="#333" size="24" @click="handleDelete(item)">删除</fui-button>
        </view>
      </view>
    </view>
    <!-- 加载提示 -->
    <fui-loadmore v-show="listData.length" :state="moreState"></fui-loadmore>
    <fui-empty v-show="!listData.length" src="/static/images/empty/data.png" :isFixed="true" title="暂无运费模板信息" size="28" color="#999"></fui-empty>
    <view class="ui-fixed-footer">
      <fui-button text="添加运费模板" height="78rpx" @click="handleToAdd"></fui-button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onShow, onReachBottom, onPullDownRefresh	} from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import utils from '@/components/firstui/fui-utils'
import { CARRIAGE_PAY_METHODS, CARRIAGE_COST_METHODS } from './consts'
import pageHeader from '@/components/header'
import carriageApi from '@/api/carriage'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const queryParams = ref({})
const listData = ref([])
const moreState = ref(1)

// 时间格式化
const formatDateTime = (date) => {
  return utils.dateFormatter(date, 'y-m-d h:i:s', 2)
}

// 格式化运费计费方式
const formatCarriageText = (chargeMode, obj) => {
  return `${obj.startCount}${CARRIAGE_COST_METHODS[chargeMode].unit}以内${obj.startPrice}元，每增加${obj.extraCount}${CARRIAGE_COST_METHODS[chargeMode].unit}，运费增加${obj.extraPrice}元。`
}

onShow(() => {
  queryParams.value = {
    pageNo: 1,
    pageSize: 10
  }
  getCarriageList()
})

// 获取商品运费模板列表
const getCarriageList = () => {
  uni.stopPullDownRefresh()
  try {
    const { userType, companyId } = store.getters
    queryParams.value.supplierId = userType === '2' ? companyId : ''
    carriageApi.getCarriageList(queryParams.value).then((res) => {
      modal.closeLoading()
      if(res.code === 0){
        const newData = res.data && res.data.list ? res.data.list : []
        if (queryParams.value.pageNo * queryParams.value.pageSize >= res.data.total) {
          moreState.value = 3
        } else {
          moreState.value = 1
        }
        if (queryParams.value.pageNo > 1) {
          listData.value = [...listData.value, ...newData]
        } else {
          listData.value = [...newData]
        }
      } else {
        modal.msgError(res.msg)
      }
    })
  } catch (err) {
    modal.closeLoading()
  }
}

const handleToAdd = () => {
  tab.navigateTo('/pages/carriage/form')
}

const handleToEdit = (row) => {
  tab.navigateTo(`/pages/carriage/form?id=${row.id}`)
}

const handleToUsed = (row) => {
  tab.navigateTo(`/pages/carriage/goods?id=${row.id}`)
}

const handleDelete = (row) => {
  if (row.applyNum) {
    modal.msgError('已有商品使用此模版，请在商品列表中进行修改后再尝试删除！')
    return
  }
  modal.confirm('确认删除该运费模板？').then(() => {
    carriageApi.deleteCarriage(row.id).then(res => {
      if (res.code === 0 && res.data) {
        modal.msgError(`【${row.name}】已删除！`)
        getCarriageList()
      } else {
        modal.msgError(`【${row.name}】删除失败！`)
      }
    })
  })
}

// 下拉刷新
onPullDownRefresh(() => {
  queryParams.value.pageNo = 1
  getCarriageList()
})

// 上拉加载更多
onReachBottom(() => {
  if (moreState.value == 1) {
    modal.loading('加载中...')
    moreState.value = 2
    queryParams.value.pageNo++
    getCarriageList()
  }
})
</script>

<style lang="scss" scoped>
.page-carriage {
  padding: 42rpx 36rpx;
  .page-carriage-tips {
    margin-top: -48rpx;
    padding: 24rpx;
  }
  .carriage-list {
    .carriage-item {
      border-radius: 16rpx;
      background-color: #fff;
      margin-bottom: 20rpx;
      padding: 32rpx;
      .carriage-item-header {
        margin-bottom: 24rpx;
        .carriage-item-used {
          display: inline-block;
          border-radius: 8rpx;
          background-color: #ecf4ff;
          margin: 0 10rpx;
          padding: 10rpx 16rpx;
          font-size: 24rpx;
          color: #2C83FC;
        }
      }
      .carriage-item-content {
        .carriage-item-info {
          margin-bottom: 5rpx;
        }
      }
      .carriage-item-footer {
        display: flex;
        justify-content: flex-end;
        margin-top: 48rpx;
      }
    }
  }
}
</style>
